﻿@model Yunwei.Domain.Models.Restaurant

@{
    ViewBag.Title = "Add";
}
<link href="~/Content/cropper.min.css" rel="stylesheet" />
<script src="~/Scripts/cropper.min.js"></script>
<script src="~/Scripts/inside.js"></script>
<script src="~/Scripts/lbs_map.js"></script>

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">添加新餐馆</h1>
    </div>
    <div class="col-lg-6">
        <a class="btn btn-primary btn-circle" href="/Admin/Restaurant/List"><i class="fa fa-reply"></i></a>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            <div class="form-horizontal">
                @Html.ValidationSummary(true)

                @Html.HiddenFor(model => model.Id)

                <div class="form-group">
                    <label class="control-label col-sm-4" for="Name">餐馆名称</label>
                    <div class="col-md-8">
                        @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="Brief">餐馆简介</label>
                    <div class="col-md-8">
                        @Html.TextBoxFor(model => model.Brief, new { @class = "form-control" })
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="Contact">联系人</label>
                    <div class="col-md-8">
                        @Html.TextBoxFor(model => model.Contact, new { @class = "form-control" })
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="Phone">联系电话</label>
                    <div class="col-md-8">
                        @Html.TextBoxFor(model => model.Phone, new { @class = "form-control" })
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="Address">餐馆地址</label>
                    <div class="col-md-8">
                        <div class="input-group">
                            @Html.TextBoxFor(model => model.Address, new { @class = "form-control", @id = "suggestId" })
                            <span class="input-group-btn">
                                <button id="positioning" class="btn btn-success" type="button">搜索</button>
                            </span>
                            @Html.HiddenFor(model => model.X, new { @id = "lng" })
                            @Html.HiddenFor(model => model.Y, new { @id = "lat" })
                        </div>

                        <div id="l-map" style="width: 605px; height: 320px; margin-top: 10px; margin-bottom: 5px;">
                            <i class="icon-spinner icon-spin icon-large"></i>地图加载中...
                        </div>
                        <script type="text/javascript">
                            $("document").ready(function () {
                                G.logic.map.init();
                            });
                        </script>
                    </div>
                    <link href="~/Scripts/KindEditor/themes/default/default.css" rel="stylesheet" />
                    <script src="~/Scripts/KindEditor/kindeditor-min.js"></script>
                    <script src="~/Scripts/KindEditor/lang/zh_CN.js"></script>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="Avatar">门头照片</label>
                    <div class="col-md-8">
                        <input class="form-control" type="hidden" name="Avatar" id="avatarPath" value="" />
                        <img class="img-responsive" id="avatarThumbnail" src="@Model.Avatar" />
                        <input class="btn btn-success" type="button" id="avatarBrowser" value="选择图片" />
                        <input class="btn btn-warning hidden" type="button" id="avatarMake" data-target="#modal" data-toggle="modal" value="制作缩略图" />
                    </div>

                    <script type="text/javascript">
                        $(document).ready(function () {
                            var $image = $('#avatarPreview');
                            var cropBoxData;
                            var canvasData;

                            $('#modal').on('shown.bs.modal', function () {
                                $image.cropper({
                                    aspectRatio: 1,
                                    autoCropArea: 0.5,
                                    built: function () {
                                        $image.cropper('setCanvasData', canvasData);
                                        $image.cropper('setCropBoxData', cropBoxData);
                                    }
                                });
                            }).on('hidden.bs.modal', function () {
                                var cropBox = $image.cropper('getData');
                                $image.cropper('destroy');

                                $.ajax({
                                    url: "/Attachment/CreateThumbnail",
                                    method: "POST",
                                    data: {
                                        url: $('#avatarPath').val(),
                                        top: cropBox.y,
                                        left: cropBox.x,
                                        width: cropBox.width,
                                        height: cropBox.height
                                    },
                                    dataType: "json",
                                    success: function (resp) {
                                        if (resp.error == 0) {
                                            $("#avatarPath").val(resp.url);
                                            $("#avatarThumbnail").attr("src", resp.url);
                                        }
                                    },
                                    error: function (jqXHR, textStatus, errorThrown) {
                                        console.log(errorThrown);
                                    }
                                });
                            });

                        });

                        KindEditor.ready(function (K) {
                            var editor = K.editor({
                                uploadJson: "/Attachment/Upload",
                                fileManagerJson: "/Attachment/FileManager",
                                allowFileManager: true
                            });

                            K('#avatarBrowser').click(function () {
                                editor.loadPlugin('image', function () {
                                    editor.plugin.imageDialog({
                                        imageUrl: K('#avatarPath').val(),
                                        clickFn: function (url, title, width, height, border, align) {
                                            K('#avatarPath').val(url);
                                            K('#avatarPreview').attr("src", url);
                                            editor.hideDialog();
                                            if (url.indexOf(window.location.host) > -1)
                                                $("#avatarMake").click();
                                        }
                                    });
                                });
                            });
                        });
                    </script>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="Description">详述</label>
                    <div class="col-md-8">
                        @Html.TextAreaFor(model => model.Description, new { @class = "form-control", @id = "restaurant_description", @style = "width:700px;height:400px", @visibility = "hidden" })
                    </div>
                    <script>
                        var editor;
                        KindEditor.ready(function (K) {
                            editor = K.create('textarea[id="restaurant_description"]', {
                                allowFileManager: true
                            });
                        });
                    </script>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-8">
                        <input type="submit" value="提交" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        }
    </div>
</div>
<div class="modal fade" id="modal" aria-labelledby="modalLabel" role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalLabel">裁剪图片</h4>
            </div>
            <div class="modal-body">
                <div>
                    <img id="avatarPreview" src="" alt="Picture" style="max-width: 100%;" />
                </div>
            </div>
            <div class="modal-footer">
                <span style="clear:both;float:left;color:red;line-height:34px;"><i class="fa fa-warning fa-fw"></i>滚动鼠标缩放图片</span>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
